<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/" xmlns:tr="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="layui-row">
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
    &nbsp;
  </div>
  <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">用户年龄</label>
        <div class="layui-input-block">
          <select name="age" lay-verify="required">
            <option value=""></option>
            <option value="24">24</option>
            <option value="25">25</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">用户性别</label>
        <div class="layui-input-block">
          <input type="radio" name="gender" value="man" title="男">
          <input type="radio" name="gender" value="woman" title="女" checked>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </div>
  <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
  </div>
</div>
</body>
<script>

  layui.use('form', function(){
    function getCoupon(gender,age){
      $.ajax({
        "url":"/getCoupon",
        "data": JSON.stringify({"gender":gender,"age":age}),
        "type":"post",
        "dataType":"json",
        contentType : 'application/json;charset=utf-8',//重要
        "success":function (json) {
          console.log(json)
          layer.alert(json.nodeValue)
        }
      });
    }
    var form = layui.form;

    //监听提交
    form.on('submit(formDemo)', function(data){
      // layer.alert(JSON.stringify(data.field));
      getCoupon(data.field.gender,data.field.age)
      return false;
    });
  });
</script>
</html>
